<template>
  <div>
    <el-divider content-position="left">宠物</el-divider>
    <el-table :data="pet_list" style="width: 100%">
      <el-table-column
        prop="name"
        label="名称"
      />
      <el-table-column
        prop="real_name"
        label="真名"
      />
      <el-table-column
        prop="level"
        label="等级"
      />
    </el-table>
    <el-divider content-position="left">物品</el-divider>
    <el-table :data="goods_list" style="width: 100%">
      <el-table-column
        width="200"
        prop="name"
        label="名称"
      />
      <el-table-column
        width="80"
        prop="count"
        label="数量"
      />
      <el-table-column
        width="80"
        prop="level"
        label="等级"
      />
      <el-table-column
        prop="extra"
        label="属性"
      />
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'Bank',
  props: {
    goodsList: {
      required: true,
      type: Array
    },
    petList: {
      required: true,
      type: Array
    }
  },
  data() {
    return {
      goods_list: this.goodsList,
      pet_list: this.petList
    }
  },
  watch: {
    goodsList: function() {
      this.goods_list = this.goodsList
    },
    petList: function() {
      this.pet_list = this.petList
    }
  }
}
</script>
